<template>
	<el-dialog v-model="dialogVisible" :fullscreen="true" append-to-body>
		<el-tabs
			type="border-card"
			class="no-box-shadow no-padding"
			v-model="activeCodeTab"
		>
			<el-tab-pane
				v-for="item in codeFileList"
				:label="item.fileName"
				:name="item.id"
				:key="item.id"
			>
				<code-editor
					v-model="item.vueModel"
					:mode="item.mode"
					:readOnly="true"
				/>
			</el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>
<script setup lang="ts">
import CodeEditor from '@/components/CodeEditor/index.vue'
interface fileListTyle {
	id: string
	fileName: string
	mode: string
	vueModel: string
	length: number
}
type RefFileListType = Ref<fileListTyle[]>

defineOptions({
	name: 'CodeDialog',
	inheritAttrs: false
})
const dialogVisible = ref(false)
const codeFileList: RefFileListType = ref([] as fileListTyle[])
const activeCodeTab = ref('')

const openDialog = (data: Array<any>) => {
	codeFileList.value = data
	activeCodeTab.value = data[0].id
	dialogVisible.value = true
}

defineExpose({
	openDialog
})
</script>
